<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 30px; height: 600px; background-color: #000;position: absolute;left: 30px; top: 30px;}
	#div2{width: 30px; height: 30px; background-color: red;position: absolute;top: 0;left: 0;}/* 在父级内定位了 */
	#div3{width: 600px; background-color: green;position: absolute;left: 100px;top: 30px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');
		var oDiv3 = document.getElementById('div3');

		oDiv2.onmousedown = function (ev){
			var ev = ev || event;

			var disY = ev.clientY - this.offsetTop;//不要单单就一个ev.clientY
			var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;

			document.onmousemove = function (ev){
				var ev = ev || event;

				var T = ev.clientY - disY;	//div2移动的距离

				if (T < 0) {
					T = 0;
				}else if(T > iMaxTop){	//父子级关系且都定位了，就不要视觉上考虑父级的offsetTop了，因为子级本身就按照父级的内容定位
					T = iMaxTop;
				}

				oDiv2.style.top = T + 'px';

				var iScale = T/iMaxTop;			//比例系数
				oDiv3.style.height = 600*iScale + 'px';
			}

			document.onmouseup = function(){
				document.onmousemove = document.onmouseup = null;
				oDiv2.removeCapture && oDiv2.removeCapture();
			}

			this.setCapture && this.setCapture();
			return false;
		}
	}
	</script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<div id="div3"></div>
</body>
</html>